<template>
	<div class="new-page" :style="`min-height: ${pageMinHeight}px`">
		<a-card style="margin-top: 24px">
			<div slot="title" class="listTitle">
				<a-button type="primary" @click="onAdd" >新建</a-button>
			</div>
			<a-table bordered :data-source="bannerList" :columns="columns" :rowKey="(record, index) => { return index }" :pagination="pagination">
				<template slot="logo" slot-scope="text">
					<img :src="text" width="150" />
				</template>
				<template slot="startTime" slot-scope="text, record">
					{{ record.startTime }}  ~ {{ record.endTime  }}
				</template>
				
				<template slot="action" slot-scope="text, record">
					<a-button type="link" @click="onEdit(record)">编辑</a-button>
					<a-popconfirm v-if="bannerList.length" title="确认删除该BANNER吗?" @confirm="() => onDelete(record.id)">
						<a-button type="link">删除</a-button>
					</a-popconfirm>
				</template>
			</a-table>
			<!-- 新增/修改 -->
			<Modal ref="modal" @confirm="onConfirm" />
		</a-card>
	</div>
</template>

<script>
import { dataSource as ds } from '@/services'
import { mapState } from 'vuex'
import config from './config.js'
import Modal from './components/modal'
export default {
	name: 'school',
	components: {
		Modal
	},
	data() {
		return {
			loading: false,
			columns: config.columns,
			bannerList: [],
			pages: {
				page: 1,
				pageSize: 10,
				total: 0
			}
		}
	},
	computed: {
		...mapState('setting', ['pageMinHeight']),
		pagination(){
			return {
				size: "default",
				current: this.pages?.page || 1,
				pagesize: this.pages?.pageSize || 10,
				total: this.pages?.total || 0,
				showSizeChanger: true,
				showLessItems: true,
				pageSizeOptions:['10', '20','50'],
				showTotal:(total, range)=> { `第 ${range[0]}-${range[1]} 条，总计 ${total} 条` },
				onChange: this.onChangePage,
				onShowSizeChange:this.onChangeSize,
			}
		}
	},
	mounted() {
		this.getBannerList();
	},
	methods: {
		getBannerList() {
			this.loading = true
			const { page, pageSize } = this.pages
			ds.bannerList({ page, pageSize }).then(res => {
                if(res?.data?.code == 200) {
					this.loading = false
					const { records, current, size, total } = res?.data?.data
					this.bannerList = records ?? []
					this.pages = {
						page: current ?? 1,
						pageSize: size ?? 10,
						total: total ?? 0
					}
				}
			})
		},
		// 新增
		onAdd(){
			this.$refs.modal.open({ title: "新创", type: "add" })
		},
		// 修改
		onEdit(e) {
			this.$refs.modal.open({ ...e, title: "编辑", type: "edit" })
		},
		// 删除banner
		onDelete(id) {
			ds.delBanner({ id }).then(res => {
				if (res?.data?.code == 200) {
					this.$message.success('删除成功!')
					this.getBannerList()
				}
			})
		},
		// 新增/修改
		onConfirm() {
			this.getBannerList()
		},
		onChangePage(page, size){
			this.pages.page = page
			this.pages.pageSize = size
			this.getBannerList()
		},
		onChangeSize(page, size){
			this.pages.page = page
			this.pages.pageSize = size
			this.getBannerList()
		}
	}
}
</script>

<style lang="less">
.listTitle {
	display: flex;
	justify-content: space-between;
}

.w-100 {
	width: 100%;
}
</style>
